<template>
	<div class="commonTree-wrapper">
		<div :class="[isMask ? 'businessMask' : '']">
			<div :class="[isMask ? 'businessDialog' : '']">
				<div class="dialog-header" v-winmove v-if="isMask">
					<span>{{ dialogTitle }}</span>
					<span class="icon iconfont iconbiaoqianlan-guanbi" @click="cancel"></span>
				</div>
				<div :class="[isMask ? 'dialog-body' : '']">
					<div :class="[isMask ? 'tree-wrapper large' : 'tree-wrapper small']">
						<el-tree
							:indent="0"
							lazy
							ref="tree"
							node-key="id"
							:props="treeProps"
							:load="loadNode"
							:expand-on-click-node="false"
							:show-checkbox="Boolean(checkBoxType)"
							icon-class="icon iconfont iconkuangjia-xiala1"
							@node-contextmenu="openMenu"
							@node-click="handleNodeClick"
							@node-expand="nodeExpand"
							@check="handleCheckChange"
						>
							<span slot-scope="{ node, data }">
								<span :class="[data.icon + `${data.state ? ' ' : ' disabled'}`]"></span>
								<span @dblclick="clkDb(node, data)">{{ node.label }}</span>
							</span>
						</el-tree>
					</div>
					<div
						ref="dropdiv"
						:class="[`${menuPositionTop ? 'dropMenu menuTop' : 'dropMenu'}` + ' ' + `${menuShow ? 'active' : ''}`]"
						v-if="Boolean(dropMenuShow)"
						v-show="menuShow"
						:style="{ top: menuTop + 'px', left: menuLeft + 'px' }"
					>
						<div v-for="item in dropMenuList" :key="item.index" @click="menuOperation(item.index)">
							<span :class="item.icon"></span>
							{{ item.label }}
						</div>
					</div>
				</div>
				<div class="dialog-footer right" v-if="isMask">
					<span class="systemButtonConfirm" @click="confirm">确定</span>
					<span class="systemButtonCancel" @click="cancel">取消</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import winmove from '@/directives/winmove'
	import { menuTree } from '@/system/api/menuManage'
	import { dictionaryTree } from '@/system/api/dictionaryManage'
	import { dataTree } from '../../business/api/dataManage'
	import { mmPartsCodeTree } from '../../business/api/mmPartsCode'
	import { getMoreDataSource, getDataSourceById } from '@/system/api/public'
	//引入公共的JS
	import eventBus from '@/utils/eventBus.js'

	export default {
		data() {
			return {
				checkBoxType: 0,
				treeURL: null,
				treeProps: {
					label: 'name',
					isLeaf: 'leaf',
					id: 'id',
				},
				rootNode: {},
				rootResolve: null,
				menuShow: false,
				menuPositionTop: false,
				menuTop: 0,
				menuLeft: 0,
				menuItems: [
					{
						name: '删除',
						iconPosition: 'before',
						iconname: 'delicon',
					},
				],
				microId: 2,
				oldNode: [],
				oldResolve: {},
			}
		},
		directives: {
			winmove,
		},
		// 树类型 type
		props: {
			type: 0,
			roleType: 0,
			dropMenuShow: 0,
			dropMenuList: null,
			checkBox: 0,
			isMask: true,
			dialogTitle: '',
			params: {},
			param: {
				parentId: 0,
			},
		},
		created() {
			this.checkBoxType = this.checkBox
			switch (Number(this.type)) {
				case 0:
					this.treeURL = menuTree
					break
				case 1:
					this.treeURL = dataTree
					break
				case 2:
					this.treeURL = dictionaryTree
					break
				case 3:
					this.treeURL = mmPartsCodeTree
					break
				default:
					return
			}
			this.globalClick()
		},
		mounted() {
			//监听兄弟组件之间传值
			eventBus.$on('dataSourceSelectChange', res => {
				this.microId = res
				this.oldNode.childNodes = []
				this.loadNode(this.oldNode, this.oldResolve)
			})
		},
		methods: {
			// 树 懒加载 加载树数据
			async loadNode(node, resolve) {
				if (node.level === 0) {
					//第一次加载根节点
					this.rootResolve = resolve
					this.rootNode = node
					this.param.parentId = 0
					this.param.pId = 0
					this.param.pid = 0
					//赋值
					this.oldNode = node
					this.oldResolve = resolve
				} else {
					//加载子节点
					this.param.parentId = node.data.id
					this.param.pId = node.data.id
					this.param.pid = node.data.id
				}
				if (this.params) {
					if (this.params.parentId) {
						console.log('params:' + JSON.stringify(this.params))
						this.param.pid = this.params.parentId
					}
				}
				this.param.microId = this.microId
				console.log(JSON.stringify(this.param))
				/**
				 * 首先加载系统的树形数据，进行渲染，当点击不同数据源时，
				 * 树形菜单更新数据
				 */
				this.treeURL(this.param).then(res => {
					//获取节点数据
					if (res.code == 200) {
						console.log(res)
						console.log('获取数据：' + JSON.stringify(res))
						console.log('this.treeURL:' + this.treeURL)
						if (res.success) {
							if (this.treeURL == menuTree) {
								res.info.forEach(item => {
									item.icon = item.type ? 'icon iconfont icongongnengcaidan-ziliaoguanli' : 'icon iconfont icongongnengcaidan-gongchengfuwuguanli'
								})
							} else if (this.treeURL == dataTree) {
								res.info.forEach(item => {
									item.icon = item.type ? 'icon iconfont iconyewu_ziliaoguanli_xiangmuziliaoqingdan' : 'icon iconfont iconyewu_ziliaoguanli_ziliaomuluqingdan'
								})
							} else if (this.treeURL == dictionaryTree) {
								res.info.forEach(item => {
									item.icon = item.type ? 'icon iconfont iconyewutubiao' : 'icon iconfont iconyewutubiao'
								})
							} else {
								res.info.forEach(item => {
									if (this.params) {
										if (this.params.LX == 1) {
											item.leaf = true
										} else {
											if (item.pid == 0) {
												item.disabled = true
												item.disableCheckbox = true
											}
										}
									}
									item.icon = item.type ? 'icon iconfont iconyewu_wuziguanli_wuzibianmaguanli' : 'icon iconfont iconyewu_wuziguanli_wuzibianmaguanli'
								})
							}
							return resolve(res.info)
						} else this.message(res.msg, 3)
					} else this.message(res.msg, 3)
				})
			},
			// 节点 左击
			async handleNodeClick(e) {
				let data = e
				data.clickType = 1
				this.$emit('getNodeInfo', data)
				this.menuShow = false
			},
			// 节点 右击
			async openMenu(e, data, node) {
				await this.$emit('getNodeInfo', node, data)
				let menuClientY = e.clientY
				let windowHeight = document.documentElement.clientHeight
				if (windowHeight - menuClientY > 210) {
					this.menuTop = e.clientY + 30
					this.menuPositionTop = false
				} else {
					this.menuPositionTop = true
					this.menuTop = e.clientY - 172 - 30
				}
				this.menuLeft = e.clientX
				this.menuShow = true
			},
			// 节点 刷新
			refreshNode(node) {
				let data = node.operationType ? node : node.parent
				if (node.level === 0 || node.rootNode) data = this.rootNode
				data.loaded = false
				data.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点
				setTimeout(() => {
					if (node.highLightId) {
						this.highLightNode(node.highLightId)
					}
				}, 100)
			},
			// 树 双击
			clkDb(node, data) {
				this.$emit('addRole', node.data)
			},
			// 树 菜单
			menuOperation(e) {
				this.$emit('menuOperations', e)
			},
			// 节点 高亮
			highLightNode(id) {
				this.$refs.tree.setCurrentKey(id)
			},
			// 节点 展开
			nodeExpand() {
				this.menuShow = false
			},
			// 监测页面点击事件，隐藏单位树菜单
			globalClick() {
				let _this = this
				document.addEventListener('click', function(e) {
					_this.menuShow = false
					let flag = e.target.contains(document.getElementsByClassName('el-menu')[0])
					if (!flag) return
				})
			},
			// 弹窗 确定按钮
			confirm() {
				let checkedList = []
				let list = this.$refs.tree.getCheckedNodes()
				for (let i = 0; i < list.length; i++) {
					if (!list[i].disableCheckbox) {
						checkedList.push(list[i])
					}
				}
				this.$emit('getCheckedType', checkedList)
			},
			// 弹窗 取消按钮
			cancel() {
				this.$emit('treeCancel')
			},
			// 勾选
			handleCheckChange(data, node) {
				if (this.checkBoxType === 2 && node.checkedNodes.length > 1) {
					this.$refs.tree.setCheckedKeys([])
					this.$refs.tree.setChecked(data, true)
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.businessDialog {
		width: 424px;
		height: 585px;
	}

	.dialog-body {
		width: 100%;
	}

	.commonTree-wrapper {
		height: 100% !important;
		.tree-wrapper {
			width: 100%;
			.small {
				height: calc(100% - 100px) !important;
			}

			.large {
				height: 100% !important;
			}

			.el-tree {
				color: var(--organization-tree-text-color);
				padding-left: 20px;
				background-color: transparent;

				::v-deep.el-tree-node {
					&:hover .el-tree-node__content {
						background-color: transparent;
					}

					.el-tree-node__content {
						.iconkuangjia-xiala1 {
							color: var(--organization-tree-dropdown-color);
							font-size: 12px;
							padding-left: 0;
							padding-right: 0;

							& ~ span span {
								&:first-child {
									margin-right: 5px;
									width: 16px;
									height: 16px;
									display: inline-block;

									&.disabled {
										color: rgba(249, 73, 99, 1);
									}
								}

								&:last-child {
									padding: 2px 8px;
								}
							}
						}

						.is-leaf.iconkuangjia-xiala1 {
							visibility: hidden;
						}
					}

					.el-tree-node__children {
						padding-left: 48px;
						overflow: visible;

						.el-tree-node {
							position: relative;

							&::before {
								content: '';
								display: block;
								width: 40px;
								height: 13px;
								border-bottom: 1px solid var(--organization-tree-line-color);
								border-bottom-left-radius: 5px;
								position: absolute;
								top: 0;
								left: 0;
								transform: translateX(-100%);
							}

							&::after {
								content: '';
								display: block;
								width: 40px;
								height: 100%;
								border-left: 1px solid var(--organization-tree-line-color);
								position: absolute;
								bottom: -10px;
								left: 0;
								transform: translateX(-100%);
							}

							&:first-child::after {
								top: 0;
								height: calc(100% + 10px);
							}

							&:last-child::after {
								top: 0;
								height: 11px;
							}
						}
					}

					&.is-current {
						.el-tree-node__content {
							background-color: transparent;

							span:last-child span:last-child {
								background-color: rgba(83, 168, 255, 1);
								color: rgba(255, 255, 255, 1);
							}
						}

						.el-tree-node__children .el-tree-node .el-tree-node__content span:last-child span:last-child {
							background-color: transparent;
							color: var(--organization-tree-text-color);
						}
					}

					&.is-expanded .el-tree-node__content {
						background-color: transparent;
					}
				}
			}
		}

		.dropMenu {
			visibility: hidden;

			&.active {
				visibility: visible;
				position: absolute;
				z-index: 998;
				background: rgba(255, 255, 255, 0.85);
				box-shadow: 0px 0px 6px 0px rgba(68, 104, 211, 0.6);
				cursor: pointer;
				display: flex;
				flex-direction: column;

				&::before {
					display: block;
					content: '';
					width: 20px;
					height: 20px;
					position: absolute;
					top: 0;
					transform: rotate(45deg) translateY(-75%);
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 0px 6px 0px rgba(68, 104, 211, 0.6);
					z-index: -999;
				}

				div {
					background: rgba(255, 255, 255, 1);
					padding: 12px 20px;
					display: inline-block;
					white-space: nowrap;
					color: rgba(51, 51, 51, 1);

					.iconzengjia {
						color: rgba(132, 142, 252, 1);
					}

					.iconbiaoge-bianji {
						color: rgba(51, 153, 255, 1);
					}

					.iconbiaoge-shanchu {
						color: rgba(249, 73, 99, 1);
					}

					&:hover {
						z-index: 999;
						background: rgba(83, 168, 255, 1);
						color: rgb(255, 255, 255);

						.icon {
							color: rgb(255, 255, 255);
						}
					}

					span {
						margin-right: 13px;
					}
				}

				&.menuTop {
					&::before {
						top: 100%;
					}
				}
			}
		}

		&.dialog-wrapper {
			z-index: 999;
			position: fixed;
			left: 75px;
			top: 78px;
			right: 0;
			bottom: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.content-wrapper {
				position: relative;
				width: 336px;
				height: 503px;
				background: var(--win-page-back-color);
				box-shadow: 0px 5px 20px 0px rgba(68, 104, 211, 0.25);
				border-radius: 4px;

				.searchBox {
					margin-left: 16px;
					margin-right: 16px;

					.el-input {
						::v-deep.el-input__icon {
							transform: translateX(-50%);
						}
					}
				}

				.title {
					display: inline-block;
					width: 328px;
					height: 40px;
					line-height: 40px;
					padding-left: 12px;
					margin: 4px;
					background: var(--win-head-back-color);
					font-size: 16px;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(0, 0, 0, 1);
				}

				.el-tree {
					height: 65%;
					overflow: auto;
					background: none;
				}

				.buttons-wrapper {
					display: inline-flex;
					position: absolute;
					bottom: 20px;
					left: 50%;
					transform: translateX(-50%);

					div {
						&:first-child {
							margin-right: 20px;
						}

						text-align: center;
					}
				}
			}
		}
	}
</style>
